<template>
  <div class="import">
    <el-card>
      <h3>批量导入</h3>
      <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
import { importEmployeesApi } from '@/api/employees'
export default {
  methods: {
    // 上传之前的逻辑
    beforeUpload (file) {
      // 判断文件的大小是否小于 2M
      // 文件的大小转换单位：
      //  b kb mb gb tb
      // 1024b = 1kb 1024kb = 1mb 1024mb = 1gb 1024gb = 1tb
      const less2M = file.size < 2 * 1024 * 1024
      if (!less2M) {
        this.$message.error('文件大小不过超过 2M')
      }
      return less2M
    },
    // 将日期从天转换为日期
    formData (days) {
      // 得到天对应的时间戳
      const mytimer = (days - 1) * 24 * 60 * 60 * 1000
      // 根据时间戳得到具体的日期
      const myDate = new Date(mytimer)
      // 将日期减去 70 年
      myDate.setFullYear(myDate.getFullYear() - 70)
      return myDate
    },
    // 成功后的回调函数
    async onSuccess ({ header, results }) {
      // 将数据的中的中文属性改为英文属性
      // 得到中文属性对应的英文属性
      const obj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      // 将数据中的所有的中文属性改为英文属性
      const newArr = results.map(item => {
        // 创建一个新的对象
        const newObj = {}
        // 遍历键 Object.keys(obj)：['入职日期', '姓名', '工号', '手机号', '转正日期']
        Object.keys(obj).forEach(subitem => {
          // subitem 对应是 ['入职日期', '姓名', '工号', '手机号', '转正日期']中的每个元素
          // obj[subitem] 对应是 timeOfEntry & username & workNumber & mobile & correctionTime
          // 将英文属性添加到 newObj 中
          // 判断当前数据是否是时间，如果是时间，将时间进行转换
          if (subitem === '入职日期' || subitem === '转正日期') {
            newObj[obj[subitem]] = this.formData(item[subitem])
          } else {
            newObj[obj[subitem]] = item[subitem]
          }
        })
        return newObj
      })
      // 将得到的数据提交到服务器
      await importEmployeesApi(newArr)
      // 提示成功
      this.$message.success('批量导入成功')
      // 跳转到员工页面
      this.$router.push('/employees')
    }
  }
}
</script>

<style lang="scss">
.import {
  margin: 20px;
  h3 {
    text-align: center;
  }
}
</style>
